<template>
  <div>
    <Table border :columns="columns" :data="list">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot-scope="{ row }" slot="id_card_fa">
        <div @click="toSee(row, 'id_card_fa')">
          <Avatar shape="square" :src="showUrl(row, 'id_card_fa')" />
        </div>
      </template>
      <template slot-scope="{ row }" slot="cer_fa">
        <div @click="toSee(row, 'cer_fa')">
          <Avatar shape="square" :src="showUrl(row, 'cer_fa')" />
        </div>
      </template>
      <template slot-scope="{ row }" slot="cer_obv">
        <div @click="toSee(row, 'cer_obv')">
          <Avatar shape="square" :src="showUrl(row, 'cer_obv')" />
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="toReview(1, row)"
        >通过</Button
        >
        <Button type="error" size="small" @click="toBo(index, row)">驳回</Button>
      </template>
    </Table>
    <Page
      :total="query.total"
      :page-size="query.pageSize"
      :current="query.page"
      @on-change="onChange"
      show-total
    />
    <Modal v-model="visible">
      <img :src="currentImage" style="width: 100%">
    </Modal>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { URL } from 'url'

export default {
  data () {
    return {
      columns: [
        {
          title: '商家姓名',
          slot: 'name'
        },
        {
          title: '商家微信',
          key: 'wx'
        },
        {
          title: '联系方式',
          key: 'tel'
        },
        {
          title: '注册地址',
          key: 'address'
        },
        {
          title: '提交时间',
          key: 'create_time'
        },
        {
          title: '身份证',
          slot: 'id_card_fa'
        },
        {
          title: '实时人脸照片',
          slot: 'cer_fa'
        },
        {
          title: '银行资质',
          slot: 'cer_obv'
        },
        {
          title: '操作',
          slot: 'action',
          width: 180,
          align: 'center'
        }
      ],
      visible: false,
      currentImage: ''
    }
  },
  computed: {
    ...mapState('shop', ['list', 'query'])
  },
  methods: {
    ...mapActions('shop', ['_getShopList', '_reviewShop']),
    remove (index) {
      this.data6.splice(index, 1)
    },
    toReview (index, row) {
      const _this = this
      this.$Modal.confirm({
        title: '确认通过审核吗？',
        // content: '<p>Content of dialog</p><p>Content of dialog</p>',
        onOk: () => {
          _this._reviewShop({ id: row.id, status: 2 }).then(res => {
            // console.log(res)
            const { path } = res
            _this.downFile(path)
            _this.$Message.success('审核成功')
            _this.init()
          }).catch(err => {
            console.log(err)
            _this.$Message.warning(err)
          })
        }
      })
    },
    downFile (content) {
      // 创建隐藏的可下载链接
      const eleLink = document.createElement('a')
      eleLink.download = '证书'
      eleLink.style.display = 'none'
      // 字符内容转变成blob地址
      const blob = new Blob([content])
      eleLink.href = window.URL.createObjectURL(blob)
      // 触发点击
      document.body.appendChild(eleLink)
      eleLink.click()
      // 然后移除
      document.body.removeChild(eleLink)
    },
    init () {
      const params = Object.assign(this.query, { status: 1 })
      this._getShopList(params)
    },
    onChange (page) {
      const { total } = this.query
      // console.log(page)
      this.$store.commit('shop/SET_QUERY', {
        total,
        page,
        status: 1
      })
      this.init()
    },
    toBo (index, row) {
      const _this = this
      this.$Modal.confirm({
        title: '确认驳回审核吗？',
        // content: '<p>Content of dialog</p><p>Content of dialog</p>',
        onOk: () => {
          _this._reviewShop({ id: row.id, status: 3 }).then(res => {
            _this.$Message.success(res)
            _this.init()
          }).catch(err => {
            _this.$Message.warning(err)
          })
        }
      })
    },
    showUrl (row, prop) {
      // console.log(row)
      if (row[prop] && row[prop][0]) {
        return row[prop][0].url
      }
      return ''
    },
    toSee (row, prop) {
      if (row[prop] && row[prop][0]) {
        this.visible = true
        this.currentImage = row[prop][0].url
        // console.log(row[prop][0].url)
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style lang="scss" scoped>
.table-header {
  position: relative;
  width: 100%;
  text-align: right;
  button {
    margin: 10px;
  }
}
</style>
